<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>七星追剧 - 播放器</title>
    <link rel="stylesheet" href="css/player.css">

    <!-- 立即执行的测试脚本 -->
    <script>
        console.log('🔥🔥🔥🔥🔥 [PLAYER-HEAD] player.html HEAD 脚本立即执行！🔥🔥🔥🔥🔥');
        console.log('[PLAYER-HEAD] 执行时间:', new Date().toLocaleTimeString());
        console.log('[PLAYER-HEAD] document.readyState:', document.readyState);
        console.log('[PLAYER-HEAD] window.location:', window.location.href);

        // 添加一个全局测试函数
        window.testPlayerLoaded = function () {
            console.log('🧪 [PLAYER-TEST] 播放器页面测试函数被调用');
            return true;
        };

        // 立即测试元素查找
        setTimeout(() => {
            console.log('🔍 [PLAYER-HEAD] 延迟测试DOM元素...');
            const video = document.getElementById('video-player');
            const playBtn = document.getElementById('play-pause-btn');
            console.log('[PLAYER-HEAD] video元素:', video ? '✅ 找到' : '❌ 未找到');
            console.log('[PLAYER-HEAD] 播放按钮:', playBtn ? '✅ 找到' : '❌ 未找到');
        }, 1000);
    </script>
</head>

<body>
    <!-- 自定义标题栏 -->
    <div class="custom-titlebar">
        <div class="titlebar-drag-region">
            <span class="titlebar-title">七星追剧 - 播放器</span>
        </div>
        <div class="titlebar-controls">
            <button class="titlebar-button minimize-btn" id="minimize-btn" title="最小化">
                <svg width="12" height="12" viewBox="0 0 12 12">
                    <path d="M0 6h12" stroke="currentColor" stroke-width="1" />
                </svg>
            </button>
            <button class="titlebar-button maximize-btn" id="maximize-btn" title="最大化/还原">
                <svg width="12" height="12" viewBox="0 0 12 12">
                    <path d="M1 1h10v10H1z" fill="none" stroke="currentColor" stroke-width="1" />
                </svg>
            </button>
            <button class="titlebar-button close-btn" id="close-btn" title="关闭">
                <svg width="12" height="12" viewBox="0 0 12 12">
                    <path d="M1 1l10 10M11 1L1 11" stroke="currentColor" stroke-width="1" />
                </svg>
            </button>
        </div>
    </div>

    <div id="player-app">
        <!-- 播放器容器 - 全屏布局 -->
        <div class="player-container">
            <video id="video-player" autoplay controlsList="nodownload nofullscreen noremoteplayback"
                preload="metadata">
                您的浏览器不支持视频播放。
            </video>

            <!-- 弹幕层 -->
            <div class="danmaku-container" id="danmaku-container"></div>

            <!-- 悬浮控制栏 -->
            <div class="player-overlay" id="player-overlay">
                <!-- 右上角控制按钮 -->
                <div class="top-right-controls">
                    <button id="toggle-always-on-top" title="窗口置顶"
                        style="width: 32px; height: 32px; background: rgba(0, 0, 0, 0.7); border: none; border-radius: 6px; color: white; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin: 4px; backdrop-filter: blur(10px); transition: all 0.2s ease;">
                        📌
                    </button>
                    <button id="cast-video" title="投屏到电视"
                        style="width: 32px; height: 32px; background: rgba(0, 0, 0, 0.7); border: none; border-radius: 6px; color: white; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin: 4px; backdrop-filter: blur(10px); transition: all 0.2s ease;">
                        📺
                    </button>
                    <button id="share-video" title="分享视频"
                        style="width: 32px; height: 32px; background: rgba(0, 0, 0, 0.7); border: none; border-radius: 6px; color: white; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin: 4px; backdrop-filter: blur(10px); transition: all 0.2s ease;">
                        📤
                    </button>
                </div>

                <!-- 顶部控制栏已隐藏 - 仅在全屏时通过JS控制显示
                <div class="overlay-header">
                    <div class="video-info">
                        <h3 id="video-title">视频标题</h3>
                        <span id="video-episode">正片</span>
                    </div>
                    <div class="overlay-controls">
                        <button id="toggle-danmaku-header" class="btn-control" title="显示弹幕设置面板">
                            <span class="icon">⚙️</span>
                        </button>
                        <button id="toggle-always-on-top-header" class="btn-control" title="窗口置顶">
                            <span class="icon">📌</span>
                        </button>
                        <button id="cast-video-header" class="btn-control" title="投屏到电视">
                            <span class="icon">📺</span>
                        </button>
                        <button id="share-video-header" class="btn-control" title="分享此剧集给好友">
                            <span class="icon">📤</span>
                        </button>
                    </div>
                </div>
                -->

                <!-- 底部播放控制栏 -->
                <div class="overlay-footer">
                    <div class="playback-controls">
                        <!-- 左侧播放控制 -->
                        <div class="playback-left">
                            <button id="play-pause-btn" class="btn-playback" title="播放/暂停">
                                <span class="icon">▶️</span>
                            </button>
                            <button id="prev-episode" class="btn-episode" disabled title="上一集">
                                <span class="icon">⏮️</span>
                            </button>
                            <button id="next-episode" class="btn-episode" title="下一集">
                                <span class="icon">⏭️</span>
                            </button>
                            <div class="time-info">
                                <span id="current-time">00:00</span>
                                <span class="time-separator">/</span>
                                <span id="total-time">00:00</span>
                            </div>
                        </div>

                        <!-- 中间进度条 -->
                        <div class="progress-container">
                            <div class="progress-bar-container">
                                <div class="progress-bar" id="progress-bar">
                                    <div class="progress-fill" id="progress-fill"></div>
                                    <div class="progress-handle" id="progress-handle"></div>
                                </div>
                            </div>
                        </div>

                        <!-- 右侧控制 -->
                        <div class="playback-right">
                            <button id="toggle-episodes" class="btn-episode" title="显示/隐藏选集">
                                <span class="icon">📋</span>
                            </button>
                            <button id="toggle-danmaku" class="btn-episode" title="切换弹幕">
                                <span class="icon">💬</span>
                            </button>
                            <button id="playback-speed" class="btn-episode" title="播放速度">
                                <span class="icon">1.0x</span>
                            </button>
                            <div class="volume-control">
                                <button id="volume-btn" class="btn-volume" title="静音/恢复">
                                    <span class="icon">🔊</span>
                                </button>
                                <div class="volume-bar-container">
                                    <div class="volume-bar" id="volume-bar">
                                        <div class="volume-fill" id="volume-fill"></div>
                                        <div class="volume-handle" id="volume-handle"></div>
                                    </div>
                                </div>
                            </div>
                            <button id="fullscreen-btn" class="btn-fullscreen" title="全屏/退出全屏">
                                <span class="icon">⛶</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 弹幕输入区域 -->
            <div class="danmaku-input-container hidden" id="danmaku-input-container">
                <div class="danmaku-input-panel">
                    <div class="danmaku-panel-header">
                        <span>弹幕设置</span>
                        <button id="close-danmaku-panel" class="btn-close-panel" title="关闭弹幕面板">
                            <span class="icon">❌</span>
                        </button>
                    </div>
                    <div class="danmaku-settings">
                        <div class="danmaku-toggle-group">
                            <label for="enable-danmaku">
                                <input type="checkbox" id="enable-danmaku" checked>
                                启用弹幕显示
                            </label>
                        </div>
                        <div class="danmaku-type-group">
                            <label>弹幕类型：</label>
                            <select id="danmaku-type" title="弹幕类型">
                                <option value="realtime">实时弹幕</option>
                                <option value="timeline">时间轴弹幕</option>
                            </select>
                        </div>
                    </div>
                    <input type="text" id="danmaku-input" placeholder="在这里输入弹幕..." maxlength="100" />
                    <div class="danmaku-controls">
                        <select id="danmaku-color" title="弹幕颜色">
                            <option value="#ffffff">白色</option>
                            <option value="#ff0000">红色</option>
                            <option value="#ffff00">黄色</option>
                            <option value="#00ff00">绿色</option>
                            <option value="#00ffff">青色</option>
                            <option value="#0000ff">蓝色</option>
                            <option value="#ff00ff">紫色</option>
                        </select>
                        <select id="danmaku-size" title="弹幕大小">
                            <option value="small">小</option>
                            <option value="medium" selected>中</option>
                            <option value="large">大</option>
                        </select>
                        <button id="send-danmaku" class="btn-send" title="发送弹幕">发送</button>
                    </div>
                </div>
            </div>

            <!-- 加载状态 -->
            <div id="player-loading" class="player-loading hidden">
                <div class="loading-spinner"></div>
                <p>视频加载中...</p>
            </div>

            <!-- 错误状态 -->
            <div id="player-error" class="player-error hidden">
                <p id="error-message">视频加载失败，请重试</p>
                <div class="error-tips">
                    <p>💡 建议：</p>
                    <ul>
                        <li>检查网络连接</li>
                        <li>尝试其他播放线路</li>
                        <li>刷新页面后重试</li>
                    </ul>
                </div>
                <button id="retry-btn" class="btn-retry">重试</button>
            </div>

            <!-- 投屏设备选择对话框 -->
            <div class="cast-device-modal" id="cast-device-modal">
                <div class="cast-modal-backdrop"></div>
                <div class="cast-modal-content">
                    <div class="cast-modal-header">
                        <h3>选择投屏设备</h3>
                        <button class="cast-modal-close" id="cast-modal-close">
                            <span class="icon">❌</span>
                        </button>
                    </div>

                    <div class="cast-modal-body">
                        <div class="cast-scanning" id="cast-scanning">
                            <div class="cast-spinner"></div>
                            <p>正在搜索可用设备...</p>
                        </div>

                        <div class="cast-device-list" id="cast-device-list">
                            <!-- 设备列表将在这里动态生成 -->
                        </div>

                        <div class="cast-no-devices" id="cast-no-devices" style="display: none;">
                            <div class="cast-no-devices-icon">📺</div>
                            <p>未找到可用的投屏设备</p>
                            <div class="cast-tips">
                                <p>请确保：</p>
                                <ul>
                                    <li>设备和电脑在同一网络下</li>
                                    <li>投屏设备已开启投屏功能</li>
                                    <li>防火墙允许相关端口通信</li>
                                </ul>
                            </div>
                            <button class="btn-refresh-devices" id="btn-refresh-devices">
                                <span class="icon">🔄</span> 重新搜索
                            </button>
                        </div>
                    </div>

                    <div class="cast-modal-footer">
                        <button class="btn-cancel" id="cast-cancel-btn">取消</button>
                    </div>
                </div>
            </div>

            <!-- 可收纳的选集列表 -->
            <div class="episode-panel" id="episode-panel">
                <div class="episode-panel-header">
                    <h4>播放列表</h4>
                    <button id="close-episodes" class="new-close-btn" title="关闭选集面板">
                        <span class="close-icon">×</span>
                    </button>
                </div>

                <!-- 线路选择区域 -->
                <div class="route-selection" id="route-selection">
                    <div class="route-tabs" id="route-tabs"></div>
                </div>

                <!-- 剧集列表区域 -->
                <div class="episode-list">
                    <div id="episodes" class="episodes"></div>
                </div>
            </div>
        </div>

        <!-- 调试信息面板 (按Ctrl+D显示) -->
        <div class="debug-panel" id="debug-panel"
            style="position: fixed; top: 10px; left: 10px; background: rgba(0,0,0,0.9); color: white; padding: 15px; border-radius: 8px; font-size: 12px; font-family: 'Courier New', monospace; z-index: 10000; max-width: 400px; display: none; border: 1px solid #444; max-height: 300px; overflow-y: auto;">
            <div style="margin-bottom: 10px; font-weight: bold; color: #4caf50;">📊 调试信息</div>
            <div id="debug-content" style="line-height: 1.4;"></div>
            <div style="margin-top: 10px; display: flex; gap: 5px;">
                <button onclick="updateDebugInfo()"
                    style="padding: 4px 8px; font-size: 11px; background: #007acc; color: white; border: none; border-radius: 3px; cursor: pointer;">刷新</button>
                <button onclick="document.getElementById('debug-panel').style.display='none'"
                    style="padding: 4px 8px; font-size: 11px; background: #666; color: white; border: none; border-radius: 3px; cursor: pointer;">关闭</button>
            </div>
        </div>

        <script>
            // 调试面板控制
            document.addEventListener('keydown', (e) => {
                if (e.ctrlKey && e.key === 'd') {
                    e.preventDefault();
                    const debugPanel = document.getElementById('debug-panel');
                    debugPanel.style.display = debugPanel.style.display === 'none' ? 'block' : 'none';
                    if (debugPanel.style.display === 'block') {
                        updateDebugInfo();
                    }
                }
            });

            function updateDebugInfo() {
                const debugContent = document.getElementById('debug-content');
                if (!debugContent) return;

                const info = [];

                // 检查Electron API
                info.push('🔧 <strong>Electron API 状态:</strong>');
                info.push(`window.electron: ${window.electron ? '✅ 可用' : '❌ 不可用'}`);
                if (window.electron) {
                    info.push(`window.electron.window: ${window.electron.window ? '✅ 可用' : '❌ 不可用'}`);
                    info.push(`toggleAlwaysOnTop: ${window.electron.window?.toggleAlwaysOnTop ? '✅ 可用' : '❌ 不可用'}`);
                    info.push(`clipboard: ${window.electron.clipboard ? '✅ 可用' : '❌ 不可用'}`);
                }

                info.push('');
                info.push('📹 <strong>播放器状态:</strong>');
                const player = window.videoPlayer;
                if (player) {
                    info.push(`videoData: ${player.videoData ? '✅ 已加载' : '❌ 未加载'}`);
                    if (player.videoData) {
                        info.push(`- 影片: ${player.videoData.vod_name || '未知'}`);
                        info.push(`- ID: ${player.videoData.vod_id || '未知'}`);
                        info.push(`- 站点: ${player.videoData.siteName || player.videoData.site_name || '未知'}`);
                        info.push(`- URL: ${player.videoData.siteUrl || player.videoData.site_url || '未知'}`);
                    }
                    info.push(`isCasting: ${player.isCasting ? '✅ 正在投屏' : '❌ 未投屏'}`);
                } else {
                    info.push('播放器实例: ❌ 未创建');
                }

                info.push('');
                info.push('🌐 <strong>浏览器 API:</strong>');
                info.push(`navigator.clipboard: ${navigator.clipboard ? '✅ 支持' : '❌ 不支持'}`);
                info.push(`navigator.presentation: ${navigator.presentation ? '✅ 支持投屏' : '❌ 不支持投屏'}`);

                info.push('');
                info.push('🎛️ <strong>按钮元素状态:</strong>');
                const buttons = [
                    { id: 'toggle-always-on-top', name: '置顶按钮' },
                    { id: 'share-video', name: '分享按钮' },
                    { id: 'cast-video', name: '投屏按钮' }
                ];
                buttons.forEach(btn => {
                    const element = document.getElementById(btn.id);
                    info.push(`${btn.name}: ${element ? '✅ 存在' : '❌ 不存在'}`);
                    if (element) {
                        const style = window.getComputedStyle(element);
                        info.push(`- 可见性: ${style.visibility !== 'hidden' && style.opacity !== '0' ? '✅' : '❌'}`);
                        info.push(`- 点击事件: ${element.onclick || element.onmousedown ? '✅' : '❓'}`);
                    }
                });

                debugContent.innerHTML = info.join('<br>');
            }
        </script>

    </div> <!-- 关闭 player-app -->

    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <script src="js/storage.js"></script>
    <script src="js/danmaku.js"></script>
    <script src="js/enhanced-danmaku.js"></script>
    <script src="js/player.js"></script>

    <!-- 初始化播放器 -->
    <script>
        // 确保DOM完全加载后初始化播放器
        document.addEventListener('DOMContentLoaded', () => {
            console.log('🌟🌟🌟 [PLAYER] DOM加载完成，开始初始化播放器 🌟🌟🌟');

            // 为重试按钮添加事件监听
            const retryBtn = document.getElementById('retry-btn');
            if (retryBtn) {
                retryBtn.addEventListener('click', () => {
                    if (window.videoPlayer && window.videoPlayer.retryVideo) {
                        window.videoPlayer.retryVideo();
                    } else {
                        console.error('播放器实例未初始化，无法重试');
                    }
                });
            }

            // 立即测试关键元素是否存在
            console.log('🔍 [PLAYER-TEST] 开始检查关键DOM元素...');
            const testElements = [
                'video-player',
                'play-pause-btn',
                'player-overlay',
                'toggle-always-on-top',
                'share-video',
                'cast-video'
            ];

            testElements.forEach(id => {
                const element = document.getElementById(id);
                console.log(`[PLAYER-TEST] ${id}: ${element ? '✅ 找到' : '❌ 未找到'}`);
                if (element) {
                    console.log(`[PLAYER-TEST] ${id} 详情:`, {
                        tagName: element.tagName,
                        className: element.className,
                        style: element.style.cssText || '无内联样式',
                        visible: element.offsetParent !== null
                    });
                }
            });

            console.log('🔍 [PLAYER-TEST] DOM元素检查完成');

            try {
                window.videoPlayer = new VideoPlayer();
                window.videoPlayer.initialize();
                console.log('[PLAYER] 播放器实例创建成功');
            } catch (error) {
                console.error('[PLAYER] 播放器初始化失败:', error);
            }
        });
    </script>
</body>

</html>